*{
    margin: 0;
    padding: 0;
}
.header-all{
    width: 100%;
    height: 400px;
    background-image: url("two.jpg");
}
.header1{
    width: 100%;
    height: 50px;
    margin: 0 auto;
}
.scroll{
    font-size: 20px;

}
.box-left{
        float: left;
        height:50px;
        margin-top: 10px;
}
.box-left li{
        list-style-type: none;
        width: 100px;
        float: left;
        line-height: 10px;
}
.box-left a:link{
        text-decoration: none;
        color:black;
}
.box-left  a:visited
{
    color: white;
}
.box-left  a:hover
{
    color: red;
}
.box-left  a:active
{
    color: blue;
}
.box-right
{
    float: right;
    height: 50px;
    margin-top: 10px;
}
.box-right li
{
    list-style-type: none;
    width: 100px;
    float: right;
    text-align: center;
}
.box-right li a:link
{
    color: black;
    text-decoration: none;
}
.box-right li a:visited
{
    color: white;
}
.box-right li a:hover
{
    color: red;
}
.box-right li a:active
{
    color: blue;
}

.header2{
    width: 100%;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.header2 p{
    font-size: 200%;
    font-weight:bold;
    font-style: italic;
}
.header2 h2{
    font-size: 300%;
    font-weight:bold;
    font-style: italic;
}
.instruct{
    width:100%;
    height:200px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.p1{
    font-size:30px;
    font-family: "宋体", serif;
    font-weight: bold;
}
.p2{
    font-size:30px;
}
.centerAll {
    width: 100%;
    height: 500px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: #fbeace;

}
.left{
    width: 33%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.left p{
    text-align: center;
    font-size: 20px;
}
.center{
    width: 34%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.center p{
    text-align: center;
    font-size: 20px;
}
.right{
    width: 33%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.right p{
    text-align: center;
    font-size: 20px;
}
.picture1{
    width: 300px;
    height: 300px;
    text-align: center;
    line-height: 300px;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    background-size: cover;
    background-image: url("1.jpg");
}
.picture2{
    width: 300px;
    height: 300px;
    text-align: center;
    line-height: 300px;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    background-size: cover;
    background-image: url("2.jpg");
}
.picture3{
    width: 300px;
    height: 300px;
    text-align: center;
    line-height: 300px;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    background-size: cover;
    background-image: url("3.webp");
}
.grid{
    width: 100%;
    height: 900px;
    display: grid;
    grid-template-columns: repeat(3,33%);
    grid-template-rows: repeat(3, 300px);
    gap: 10px;
}

.one{
    grid-row: span 3;
    background-image: url("4.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.grid-item1{
    padding: 90px 0 0 130px ;
    text-align: center;
}
.grid-item2{
    padding: 120px 150px 0 0;
    text-align: center;
}
.grid-item3{
    padding: 100px 0 0 170px;
    text-align: center;
}
.grid p{
    font-size: 20px;
    font-family: "宋体", serif;
    font-weight: bold;
}
.bottom{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}

button {
    border: 0;
    margin: 20px;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: bold;
    padding: 15px 50px;
    border-radius: 50px;
    color: white;
    outline: none;
    position: relative;
}

button:before {
    content: '';
    display: block;
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.4) 50%);
    background-size: 210% 100%;
    background-position: right bottom;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 50px;
    transition: all 1s;
    -webkit-transition: all 1s;
}

.an{
    background-image: linear-gradient(to right, #25aae1, #40e495);
    box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}

.an:hover:before {
    background-position: left bottom;
}





